---
id: multi_select
title: MultiSelect
sidebar_label: MultiSelect
---

MultiSelect allows users to select multiple options from a dropdown list. It supports opening and closing states, custom value rendering, and keyboard navigation among other features.

## Usage

To use the `MultiSelect`, import it alongside its item component. You can pass props like `value`, `onMultiValueChange`, `size`, `label`, `disabled`, and many more to customize its behavior and appearance.


import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic MultiSelect

A simple example demonstrating the basic usage of the `MultiSelect` component.

import MultiSelectBasicDemo from '../../samples/components/multi_select/multi_select_basic';
import MultiSelectBasicSource from '!!raw-loader!../../samples/components/multi_select/multi_select_basic';

<CodeSample>
    <MultiSelectBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{MultiSelectBasicSource}</CodeBlock>

## Custom Value Rendering

This example shows how to customize the rendering of selected values.

import MultiSelectCustomRenderDemo from '../../samples/components/multi_select/multi_select_custom_render';
import MultiSelectCustomRenderSource from '!!raw-loader!../../samples/components/multi_select/multi_select_custom_render';

<CodeSample>
    <MultiSelectCustomRenderDemo/>
</CodeSample>

<CodeBlock language="tsx">{MultiSelectCustomRenderSource}</CodeBlock>

## Handling Disabled State

An example to demonstrate a `MultiSelect` component in a disabled state.

import MultiSelectDisabledDemo from '../../samples/components/multi_select/multi_select_disabled';
import MultiSelectDisabledSource from '!!raw-loader!../../samples/components/multi_select/multi_select_disabled';

<CodeSample>
    <MultiSelectDisabledDemo/>
</CodeSample>

<CodeBlock language="tsx">{MultiSelectDisabledSource}</CodeBlock>